<template>
	<view class="nas-video">
		<view class="nas-fileContent">
			<view class="nas-top-bar">
				<view class="nas-bar-item" @click="goBack"><image src="../../../static/nas-static/nas_back_s.svg" mode=""></image></view>
				<view class="nas-bar-item">{{ title }}</view>
				<view class="nas-bar-item"></view>
			</view>
			<view class="video-content" v-if="type === 'video' || type === 'radio'">
				<!-- <wrs-videoplayer ref="videoPlayer" :style="'width:100%;height:100%'"></wrs-videoplayer> -->
				<video class="nas-myVideo" :src="urlSrc" @error="videoErrorCallback" object-fit="contain" autoplay="true" danmu-btn controls></video>
			</view>
			<!-- <view class="img-content" v-if="type === 'image'"><image :src="urlSrc" mode="aspectFit"></image></view> -->
		</view>
	</view>
</template>

<script>
import request from '../utils/request.js';
export default {
	data() {
		return {
			// urlSrc: 'https://media-qhxn-person.qh4oss.xstore.ctyun.cn/PERSONCLOUD/db26d64a-7733-4528-84fc-3cead60dfb22.mp4?x-amz-CLIENTTYPEIN=WEB&AWSAccessKeyId=g6jU1T3TkAbPKf5ouH5d&x-amz-userLevel=0&x-amz-limitrate=5120&response-content-type=video/mp4&x-amz-UID=502559218&response-content-disposition=attachment%3Bfilename%3D%22123.mp4%22%3Bfilename*%3DUTF-8%27%27123.mp4&x-amz-CLIENTNETWORK=UNKNOWN&x-amz-CLOUDTYPEIN=PERSON&Signature=QOCFmtkt9lKkyw/6vIHtz1Jze%2BE%3D&Expires=1657014189&x-amz-FSIZE=18435148&x-amz-UFID=61436116562704928',
			urlSrc: '',
			filenamepath: '',
			type: '',
			imgList: []
		};
	},
	onLoad(e) {
		this.title = e.filename;
		this.type = this.getFileType(e.filename);
		this.filenamepath = e.filenamepath;
		this.imgList = this.type === 'image' ? JSON.parse(e.imgList) : [];
		this.getInfos();
	},
	methods: {
		async getInfos() {
			const params = {
				method: 'POST',
				url: '/nas/user/upload/userInfo',
				contentType: 'application/x-www-form-urlencoded',
				data: {
					pathFileName: this.filenamepath,
					uploadType: 1
				}
			};
			const res = await request(params);
			const token = res.data;
			// 图片是数组特殊处理
			this.urlSrc =
				'http://58.34.36.138:18480/nasforward/file/piece/download?filenamepath=' +
				this.filenamepath +
				'&offset=0&bufsize=&fileName=' +
				this.title +
				'&uploadToken=' +
				token +
				'&clientType=2';
			this.urlSrc = encodeURI(this.urlSrc);
			console.log(this.urlSrc, 'urlSrc');
			// 打开文档
			if (this.type === 'txt' || this.type === 'excel' || this.type === 'word' || this.type === 'pdf' || this.type === 'ppt') {
				uni.downloadFile({
					url: this.urlSrc,
					success: function(res) {
						var filePath = res.tempFilePath;
						console.log(filePath, 'filePath');
						uni.openDocument({
							filePath: filePath,
							// fileType: 'pdf',
							showMenu: true,
							success: function(res) {
								console.log('打开文档成功');
							}
						});
					}
				});
				uni.navigateBack({
					delta: 1
				});
			} 
			// else if(this.type === 'video' || this.type === 'radio') {
			// 	const testModule = uni.requireNativePlugin("Seal-OfficeOnline")
			// 	// 视频播放，支持市面上几乎所有的视频格式，包括mp4, flv, avi, 3gp, webm, ts, ogv, m3u8, asf, wmv, rm, rmvb, mov, mkv等18种视频格式
			// 	// 功能包括：全屏播放、锁屏、分享、画面比例调节、左边上下滑动调节亮度，右边上下滑动调节音量等
			// 	// 支持Android和IOS
			// 	testModule.openFile({
			// 	    videoUrl: this.urlSrc, // 视频在线url，此参数优先于图片预览和文档预览
			// 	})
			// }
		},
		goBack() {
			uni.navigateBack({
				delta: 1
			});
		},
		goHome() {
			uni.navigateBack({
				delta: 1
			});
		},

		videoErrorCallback(e) {
			// console.log(e, 'eeeeeeeee');
		},
		/* 根据后缀判断文件类型 */
		getFileType(fileName) {
			let suffix = ''; // 后缀获取
			let result = ''; // 获取类型结果
			if (fileName) {
				const flieArr = fileName.split('.'); // 根据.分割数组
				suffix = flieArr[flieArr.length - 1]; // 取最后一个
			}
			if (!suffix) return false; // fileName无后缀返回false
			suffix = suffix.toLocaleLowerCase(); // 将后缀所有字母改为小写方便操作
			// 匹配图片
			const imgList = ['png', 'jpg', 'jpeg', 'bmp', 'gif']; // 图片格式
			result = imgList.find(item => item === suffix);
			if (result) return 'image';
			// 匹配txt
			const txtList = ['txt'];
			result = txtList.find(item => item === suffix);
			if (result) return 'txt';
			// 匹配excel
			const excelList = ['xls', 'xlsx'];
			result = excelList.find(item => item === suffix);
			if (result) return 'excel';
			// 匹配word
			const wordList = ['doc', 'docx'];
			result = wordList.find(item => item === suffix);
			if (result) return 'word';
			// 匹配pdf
			const pdfList = ['pdf'];
			result = pdfList.find(item => item === suffix);
			if (result) return 'pdf';
			// 匹配ppt
			const pptList = ['ppt', 'pptx'];
			result = pptList.find(item => item === suffix);
			if (result) return 'ppt';
			// 匹配zip
			const zipList = ['rar', 'zip', '7z'];
			result = zipList.find(item => item === suffix);
			if (result) return 'zip';
			// 匹配视频
			const videoList = ['mp4', 'm2v', 'mkv', 'rmvb', 'wmv', 'avi', 'flv', 'mov', 'm4v'];
			result = videoList.find(item => item === suffix);
			if (result) return 'video';
			// 匹配音频
			const radioList = ['mp3', 'wav', 'wmv'];
			result = radioList.find(item => item === suffix);
			if (result) return 'radio';
			// 其他文件类型
			return 'other';
		}
	}
};
</script>

<style lang="scss" scoped>
.nas-video {
	position: relative;
	height: 100vh;
	overflow: hidden;
	background: #fff;
	.nas-fileContent {
		position: absolute;
		top: 158rpx;
		left: 0;
		right: 0;
		bottom: 0;
	}
	.nas-top-bar {
		position: fixed;
		top: 64rpx;
		left: 10rpx;
		right: 10rpx;
		height: 95rpx;
		display: flex;
		align-items: center;
		background: #ffffff;
		border-bottom: 1rpx solid #d9d9d9;
		.nas-bar-item {
			flex: 1;
			&:first-of-type {
				display: flex;
				align-items: center;
				image {
					width: 50rpx;
					height: 34rpx;
				}
			}
			&:nth-of-type(2) {
				text-align: center;
				ont-family: HarmonyOS_Sans_SC_Medium;
				font-size: 34rpx;
				color: rgba(51, 51, 51, 0.9);
				font-weight: 500;
			}
			&:last-of-type {
				text-align: right;
				font-family: HarmonyOS_Sans_SC;
				font-size: 28rpx;
				color: #3069dc;
				font-weight: 400;
				margin-right: 10rpx;
			}
		}
	}
	.nas-content {
		padding: 32rpx;
		text-align: center;
		font-family: HarmonyOS_Sans_SC;
		font-size: 28rpx;
		color: #808080;
		letter-spacing: 0;
		font-weight: 400;
	}
	.video-content {
		padding-bottom: 30px;
		text-align: center;
		height: 100%;
		width: 100%;
		background-color: black;
		.nas-myVideo {
			width: 100%;
			height: 100%;
		}
	}
	.img-content {
		width: 100%;
		height: 100%;
		image {
			width: 100%;
			height: 100%;
		}
	}
}
</style>
